<script setup lang="ts">
import { ref } from 'vue'

const dataInfo = ref([
  { title: '国内升学率', value: '44.31%', color: '#5c8b85' },
  { title: '出国率', value: '34.31%', color: '#719dc0' },
  { title: '就业率', value: '98.31%', color: '#bd925f' },
])

const workList = ref([
  { title: '华为技术有限公司', number: '122人' },
  { title: '中国工商银行', number: '122人' },
  { title: '北京大学', number: '122人' },
  { title: '腾讯', number: '122人' },
])
</script>

<template>
  <view class="college-postgraduate wh100p flex-column">
    <view class="w100p flex dataInfo-box" style="">
      <view v-for="(item, index) in dataInfo" :key="index" class="dataInfo-item flex-column gap8 column-center">
        <view class="font18" :style="{ color: item.color }">{{ item.value }}</view>
        <view class="font12">{{ item.title }}</view>
      </view>
    </view>
    <view class="w100p flex-column postageArea-box">
      <view class="postageArea-title">毕业生签约地区流向</view>
      <scroll-view class="w100p" :enable-flex="true" scroll-x style="white-space: nowrap">
        <view
          v-for="(item, index) in 20"
          :key="index"
          class="flex-column column-center h100p gap8 postageArea-item"
          style="display: inline-block; text-align: center"
        >
          <view class="flex-column relative column-center postageArea-line" style="margin: 0 auto">
            <view class="font12" style="margin-left: 24rpx">80%</view>
            <view class="w100p" style="height: 80%; background-color: #62a7ad; border-radius: 100rpx" />
          </view>
          <view style="font-size: 24rpx; writing-mode: vertical-rl; white-space: nowrap; margin: 10rpx auto">{{ '广东省' }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="postageWork flex-column">
      <view class="postageWork-title">毕业生签约单位</view>
      <view v-for="(item, index) of workList" :key="index" class="postageWork-item flex-between font14">
        <text>{{ `${index + 1}、${item.title}` }}</text>
        <text>{{ item.number }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.college-postgraduate {
  padding: 24rpx 24rpx;
  box-sizing: border-box;
}

.dataInfo-box {
  padding: 10rpx 0;
}

.dataInfo-item {
  flex: 1;
}

.postageArea-box {
  border-bottom: 1rpx solid #f6f6f6;
}

.postageArea-title {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f6f6f6;
}

.postageArea-item {
  width: 100rpx;
  height: 450rpx;
  padding: 20rpx 0;
}

.postageArea-line {
  height: 80%;
  width: 15rpx;
  background-color: #ededed;
  border-radius: 100rpx;
  justify-content: flex-end;
}

.postageWork-title {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f6f6f6;
}

.postageWork-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f6f6f6;
}
</style>
